@value unit, error-color, font-size-smaller from '../global/global.css';

.dialogContainer {
  position: relative;

  display: flex;
  flex-direction: column;

  max-height: inherit;

  & :global(.ring-form__group:last-child) {
    margin-bottom: 0;
  }

  & :global(.ring-form) {
    width: 100%;
  }
}

.wide {
  && {
    width: calc(unit * 75);
    max-width: calc(unit * 75);
  }
}

.autoWidth {
  && {
    width: auto;
    max-width: 100%;
  }
}

.header {
  && {
    padding-top: unit;

    cursor: move;
    user-select: none;

    font-size: 24px;
  }
}

.inSidebar .header {
  cursor: default;
  user-select: text;
}

.inSidebar :global(.ring-form) {
  width: initial;
}

.scrollableWrapper {
  && {
    overflow: visible;

    width: auto;
  }
}

.content {
  && {
    overflow: visible;
  }
}

.error {
  word-wrap: break-word;

  color: error-color;
}

.footer {
  height: auto;
  padding: calc(unit * 2) calc(unit * 4);
  padding-top: calc(unit * 2 - 2px);

  text-align: left;

  font-size: 0;
}

.footerDescription {
  margin-bottom: calc(unit * 2);

  font-size: font-size-smaller;
}

.footerItems {
  white-space: nowrap;
}

.footerItem {
  display: inline-block;

  /**
  * Do not make space using margin-right as it will break spaces between right-sided buttons in dialog's footer
  */
  &:not(:first-child) {
    margin-left: calc(unit * 2);
  }

  /* Increase selector specificity when ring buttons are used as footer items */
  &.ring-button {
    margin-left: unit;
  }

  &.ring-button:first-of-type {
    margin-left: 0;
  }
}
